import { Input, Modal, Form} from "antd";
import { connect } from "dva";
import React, { PureComponent } from "react";

const TreeEditForm = Form.create({ name: 'publishModal' })(
    class extends React.Component {

        render() {

            const {docTreeModalVisible,docTreeModalData,docTreeModalLoading} = this.props.docAssetsState
            const { getFieldDecorator } = this.props.form

            const formItemLayout = {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 6 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
            };

            return (
                <Modal
                    title={(docTreeModalData && docTreeModalData.id && docTreeModalData.id.length)?'编辑':'新增'}
                    visible={docTreeModalVisible}
                    destroyOnClose = {true}
                    confirmLoading = {docTreeModalLoading}
                    okText = '保存'
                    cancelText = "取消"
                    onCancel={() => this.props.handleCancle()}
                    onOk={() => this.props.handleSave()}
                >
                    <Form {...formItemLayout}>
                        <Form.Item label="目录名">
                            {getFieldDecorator('name', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入目录名称',
                                    },
                                ],
                                initialValue:docTreeModalData?docTreeModalData.name:''
                                
                            })(<Input />)}
                        </Form.Item>

                        <Form.Item label="目录描述">
                            {getFieldDecorator('description', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入目录描述',
                                    },
                                ],
                                initialValue:docTreeModalData?docTreeModalData.description:''
                            })(<Input />)}
                        </Form.Item>
                    </Form>
                </Modal>
            )
        }

    }
)

class DocTreeEditModal extends PureComponent {

    saveFormRef = formRef => {
        this.formRef = formRef;
      };

      handleSave = (docTreeModalData,selectedTreeNodeId) =>{
        const { form } = this.formRef.props;
        form.validateFields((err, values) => {
            if (err) {
              return;
            }
            console.log('Received values of form: ', values);
            let saveData = {...values}
            if(docTreeModalData){
                saveData.id = docTreeModalData.id
                saveData.ownerId = docTreeModalData.owner.id
            }else{
                saveData.id = null
                saveData.ownerId = selectedTreeNodeId
            }
            this.props.saveModalData(saveData)
          });
      }

    render() {
        const { docAssetsState } = this.props
        const {docTreeModalData,selectedTreeNodeId} = docAssetsState
        return (
            <TreeEditForm
                wrappedComponentRef={this.saveFormRef}
                docAssetsState={docAssetsState}
                handleCancle={this.props.dismissDocTreeModal}
                handleSave = {()=>this.handleSave(docTreeModalData,selectedTreeNodeId)}
            />
        )
    }


}

const mapState = (state) => {
    return {
        docAssetsState: {...state.docAssets}
    }
}

const mapDispatch = (dispatch) => {
    return {
        dismissDocTreeModal() {
            dispatch({
                type: 'docAssets/changeDocTreeModalVisible',
                payload: {docTreeModalVisible: false}
            })
            dispatch({
                type: 'docAssets/changeDocTreeModalData',
                payload: {docTreeModalData: null}
            })
        },
        saveModalData(data){
            dispatch({
                type: 'docAssets/changeDocTreeModalLoading',
                payload: {docTreeModalLoading: true}
            })
            dispatch({
                type: 'docAssets/saveTreeNode',
                payload: {data}
            })
        }
    }
}

export default connect(mapState, mapDispatch)(DocTreeEditModal)